<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.jj.dao.impl.StatisticsDaoImpl" %>
<%@ page import="com.jj.entity.Department" %>
<%@ page import="java.util.*" %>
<%
    StatisticsDaoImpl statisticsDao = new StatisticsDaoImpl();
    int totalEmployees = statisticsDao.getTotalEmployees();
    int totalDepartments = statisticsDao.getTotalDepartments();
    int thisMonthHires = statisticsDao.getThisMonthHires();

    Map<Department, Integer> departmentStats = statisticsDao.getDepartmentStats();
    Map<String, Integer> positionStats = statisticsDao.getPositionStats();

    // 准备职位数据并按数量降序排序
    List<Map.Entry<String, Integer>> sortedPositions = new ArrayList<>(positionStats.entrySet());
    sortedPositions.sort((a, b) -> b.getValue().compareTo(a.getValue()));
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计 - 员工管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 内联基础样式 -->
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f3f4f6;
            color: #111827;
        }
        .flex {
            display: flex;
        }
        .flex-col {
            flex-direction: column;
        }
        .items-center {
            align-items: center;
        }
        .justify-between {
            justify-content: space-between;
        }
        .h-screen {
            height: 100vh;
        }
        .w-64 {
            width: 16rem;
        }
        .bg-blue-800 {
            background-color: #1e40af;
        }
        .text-white {
            color: white;
        }
        .p-4 {
            padding: 1rem;
        }
        .text-2xl {
            font-size: 1.5rem;
            line-height: 2rem;
        }
        .font-bold {
            font-weight: 700;
        }
        .mt-6 {
            margin-top: 1.5rem;
        }
        .px-4 {
            padding-left: 1rem;
            padding-right: 1rem;
        }
        .py-2 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }
        .hover\:bg-blue-700:hover {
            background-color: #1d4ed8;
        }
        .mr-3 {
            margin-right: 0.75rem;
        }
        .flex-1 {
            flex: 1 1 0%;
        }
        .p-8 {
            padding: 2rem;
        }
        .overflow-y-auto {
            overflow-y: auto;
        }
        .mb-6 {
            margin-bottom: 1.5rem;
        }
        .text-gray-800 {
            color: #1f2937;
        }
        .text-gray-600 {
            color: #4b5563;
        }
        .rounded-full {
            border-radius: 9999px;
        }
        .bg-blue-500 {
            background-color: #3b82f6;
        }
        .w-10 {
            width: 2.5rem;
        }
        .h-10 {
            height: 2.5rem;
        }
        .grid {
            display: grid;
        }
        .grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .gap-4 {
            gap: 1rem;
        }
        .bg-white {
            background-color: white;
        }
        .rounded-lg {
            border-radius: 0.5rem;
        }
        .shadow {
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        }
        .hover\:shadow-md:hover {
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }
        .transition-shadow {
            transition-property: box-shadow;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
        }
        .bg-blue-100 {
            background-color: #dbeafe;
        }
        .text-blue-600 {
            color: #2563eb;
        }
        .text-xl {
            font-size: 1.25rem;
            line-height: 1.75rem;
        }
        .ml-4 {
            margin-left: 1rem;
        }
        .text-gray-500 {
            color: #6b7280;
        }
        .text-green-500 {
            color: #10b981;
        }
        .text-sm {
            font-size: 0.875rem;
            line-height: 1.25rem;
        }
        .bg-green-100 {
            background-color: #d1fae5;
        }
        .text-green-600 {
            color: #059669;
        }
        .bg-purple-100 {
            background-color: #f3e8ff;
        }
        .text-purple-600 {
            color: #9333ea;
        }
        .grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .gap-6 {
            gap: 1.5rem;
        }
        .text-lg {
            font-size: 1.125rem;
            line-height: 1.75rem;
        }
        .font-semibold {
            font-weight: 600;
        }
        .h-64 {
            height: 16rem;
        }
        .overflow-x-auto {
            overflow-x: auto;
        }
        .min-w-full {
            min-width: 100%;
        }
        .divide-y > :not([hidden]) ~ :not([hidden]) {
            border-top-width: 1px;
        }
        .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
            border-color: #e5e7eb;
        }
        .bg-gray-50 {
            background-color: #f9fafb;
        }
        .px-6 {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
        .py-3 {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
        }
        .text-xs {
            font-size: 0.75rem;
            line-height: 1rem;
        }
        .uppercase {
            text-transform: uppercase;
        }
        .tracking-wider {
            letter-spacing: 0.05em;
        }
        .whitespace-nowrap {
            white-space: nowrap;
        }
        .text-gray-900 {
            color: #111827;
        }
        .bg-blue-700 {
            background-color: #1d4ed8;
        }
    </style>
</head>
<body class="bg-gray-100">
<div class="flex h-screen">
    <!-- 侧边栏 -->
    <div class="w-64 bg-blue-800 text-white flex flex-col">
        <div class="p-4">
            <h1 class="text-2xl font-bold">员工管理系统</h1>
        </div>
        <nav class="mt-6 flex-1">
            <a href="index.jsp" class="flex items-center px-4 py-2 text-white hover:bg-blue-700">
                <i class="fa fa-home mr-3"></i>
                首页
            </a>
            <a href="index.jsp" class="flex items-center px-4 py-2 text-white hover:bg-blue-700">
                <i class="fa fa-users mr-3"></i>
                员工管理
            </a>
            <a href="#" class="flex items-center px-4 py-2 text-white hover:bg-blue-700">
                <i class="fa fa-calendar-alt mr-3"></i>
                考勤管理
            </a>
            <a href="#" class="flex items-center px-4 py-2 text-white hover:bg-blue-700">
                <i class="fa fa-money-bill-wave mr-3"></i>
                薪资管理
            </a>
            <a href="statistics.jsp" class="flex items-center px-4 py-2 bg-blue-700 text-white">
                <i class="fa fa-chart-bar mr-3"></i>
                数据统计
            </a>
        </nav>
    </div>

    <!-- 主内容区 -->
    <div class="flex-1 p-8 overflow-y-auto">
        <!-- 顶部导航 -->
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-gray-800">数据统计</h2>
            <div class="flex items-center">
                <span class="mr-2 text-gray-600"><%= new java.text.SimpleDateFormat("yyyy-MM-dd").format(new java.util.Date()) %></span>
                <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
                    <i class="fa fa-user"></i>
                </div>
            </div>
        </div>

        <!-- 数据统计卡片 -->
        <div class="grid grid-cols-3 gap-4 mb-6">
            <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
                <div class="flex items-center">
                    <div class="p-3 bg-blue-100 rounded-full">
                        <i class="fa fa-users text-blue-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-gray-500">总员工数</p>
                        <p class="text-2xl font-bold"><%= totalEmployees %></p>
                    </div>
                </div>
                <div class="mt-3 text-sm text-gray-500">
                    <span class="text-green-500"><i class="fa fa-caret-up"></i> 5.2%</span> 上月增长
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
                <div class="flex items-center">
                    <div class="p-3 bg-green-100 rounded-full">
                        <i class="fa fa-building text-green-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-gray-500">部门数量</p>
                        <p class="text-2xl font-bold"><%= totalDepartments %></p>
                    </div>
                </div>
                <div class="mt-3 text-sm text-gray-500">
                    <span class="text-green-500"><i class="fa fa-caret-up"></i> 2.1%</span> 上月增长
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
                <div class="flex items-center">
                    <div class="p-3 bg-purple-100 rounded-full">
                        <i class="fa fa-user-plus text-purple-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-gray-500">本月入职</p>
                        <p class="text-2xl font-bold"><%= thisMonthHires %></p>
                    </div>
                </div>
                <div class="mt-3 text-sm text-gray-500">
                    <span class="text-green-500"><i class="fa fa-caret-up"></i> 10.5%</span> 上月增长
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="grid grid-cols-1 gap-6">
            <!-- 部门分布柱形图 -->
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-semibold mb-4">部门人数分布</h3>
                <div class="h-64">
                    <canvas id="departmentChart"></canvas>
                </div>
            </div>

            <!-- 职位分布柱形图 -->
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-semibold mb-4">职位人数分布</h3>
                <div class="h-64">
                    <canvas id="positionChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 修改后的柱形图实现 -->
<script>
    function drawBarChart(canvasId, labels, data, title) {
        var canvas = document.getElementById(canvasId);
        if (!canvas) return;

        var ctx = canvas.getContext('2d');
        var width = canvas.width = canvas.parentElement.clientWidth;
        var height = canvas.height = canvas.parentElement.clientHeight;

        // 清除画布
        ctx.clearRect(0, 0, width, height);

        // 设置边距（增加左右边距以适应长标签）
        var margin = {top: 30, right: 40, bottom: 100, left: 50};
        var chartWidth = width - margin.left - margin.right;
        var chartHeight = height - margin.top - margin.bottom;

        // 计算比例尺
        var maxValue = Math.max(...data);
        var yScale = chartHeight / (maxValue || 1); // 避免除以0

        // 调整柱形宽度和间距（减小柱形宽度）
        var barWidth = Math.min(30, chartWidth / labels.length * 0.5); // 最大宽度30px
        var barGap = chartWidth / labels.length * 0.5;

        // 如果标签太多，启用水平滚动
        if (labels.length > 10) {
            canvas.style.width = (labels.length * (barWidth + barGap) + margin.left + margin.right) + 'px';
            canvas.width = labels.length * (barWidth + barGap) + margin.left + margin.right;
            chartWidth = labels.length * (barWidth + barGap);
        }

        // 绘制标题
        ctx.fillStyle = '#374151';
        ctx.font = 'bold 16px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(title, width / 2, margin.top - 10);

        // 绘制Y轴
        ctx.beginPath();
        ctx.moveTo(margin.left, margin.top);
        ctx.lineTo(margin.left, margin.top + chartHeight);
        ctx.strokeStyle = '#9CA3AF';
        ctx.stroke();

        // 绘制Y轴刻度
        var ySteps = Math.min(5, maxValue || 1);
        for (var i = 0; i <= ySteps; i++) {
            var value = Math.round(maxValue * i / ySteps);
            var y = margin.top + chartHeight - (value * yScale);

            ctx.beginPath();
            ctx.moveTo(margin.left - 5, y);
            ctx.lineTo(margin.left, y);
            ctx.stroke();

            ctx.fillStyle = '#6B7280';
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            ctx.fillText(value, margin.left - 10, y);
        }

        // 绘制X轴
        ctx.beginPath();
        ctx.moveTo(margin.left, margin.top + chartHeight);
        ctx.lineTo(margin.left + chartWidth, margin.top + chartHeight);
        ctx.stroke();

        // 绘制柱形
        labels.forEach(function(label, i) {
            var barHeight = (data[i] || 0) * yScale;
            var x = margin.left + i * (barWidth + barGap) + barGap/2;
            var y = margin.top + chartHeight - barHeight;

            // 绘制柱形
            ctx.fillStyle = '#3B82F6';
            ctx.fillRect(x, y, barWidth, barHeight);

            // 绘制数值
            if (data[i] > 0) { // 只有数值大于0才显示
                ctx.fillStyle = '#111827';
                ctx.textAlign = 'center';
                ctx.fillText(data[i], x + barWidth/2, y - 5);
            }

            // 绘制标签（调整标签位置和旋转角度）
            ctx.fillStyle = '#6B7280';
            ctx.save();
            ctx.translate(x + barWidth/2, margin.top + chartHeight + 15);
            ctx.rotate(-Math.PI/4);
            ctx.textAlign = 'right';
            ctx.font = '12px Arial'; // 减小字体大小
            ctx.fillText(label.substring(0, 10), 0, 0); // 限制标签长度
            ctx.restore();
        });
    }

    // 页面加载后绘制图表
    document.addEventListener('DOMContentLoaded', function() {
        // 部门分布柱形图
        var deptLabels = [
            <% for (Map.Entry<Department, Integer> entry : departmentStats.entrySet()) { %>
            '<%= entry.getKey().getDeptName() %>',
            <% } %>
        ];
        var deptData = [
            <% for (Map.Entry<Department, Integer> entry : departmentStats.entrySet()) { %>
            <%= entry.getValue() %>,
            <% } %>
        ];
        drawBarChart('departmentChart', deptLabels, deptData, '各部门员工数量');

        // 职位分布柱形图
        var posLabels = [
            <% for (Map.Entry<String, Integer> entry : sortedPositions) { %>
            '<%= entry.getKey() %>',
            <% } %>
        ];
        var posData = [
            <% for (Map.Entry<String, Integer> entry : sortedPositions) { %>
            <%= entry.getValue() %>,
            <% } %>
        ];
        drawBarChart('positionChart', posLabels, posData, '各职位员工数量');

        // 添加图表容器滚动条
        document.querySelectorAll('.h-64').forEach(container => {
            container.style.overflowX = 'auto';
            container.style.overflowY = 'hidden';
        });
    });
</script>
</body>
</html>